<%--
  Created by IntelliJ IDEA.
  User: ZTK
  Date: 2025/6/13
  Time: 23:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>二手平台 - 商品列表</title>
    <link href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap-icons.css">
    <style>
        :root {
            --primary-color: #ff5000;
            --secondary-color: #f5f5f5;
        }

        body {
            background-color: #f5f5f5;
            padding-top: 56px;
        }

        .navbar {
            background-color: var(--primary-color);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .navbar-brand {
            font-weight: bold;
            color: white !important;
        }

        .search-bar {
            background-color: white;
            border-radius: 20px;
            overflow: hidden;
        }

        .search-bar input {
            border: none;
            box-shadow: none;
        }

        .search-bar button {
            background: none;
            border: none;
            color: #666;
        }

        .category-nav {
            background-color: white;
            overflow-x: auto;
            white-space: nowrap;
            padding: 10px 0;
        }

        .category-item {
            display: inline-block;
            padding: 5px 15px;
            margin: 0 5px;
            border-radius: 15px;
            background-color: var(--secondary-color);
            cursor: pointer;
        }

        .category-item.active {
            background-color: var(--primary-color);
            color: white;
        }

        .product-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            transition: transform 0.2s;
            height: 100%;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .product-image {
            height: 180px;
            object-fit: cover;
        }

        .product-price {
            color: var(--primary-color);
            font-weight: bold;
            font-size: 1.1rem;
        }

        .product-title {
            font-size: 0.95rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            height: 40px;
        }

        .product-meta {
            color: #888;
            font-size: 0.8rem;
        }

        .btn-post {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 3px 10px rgba(255, 80, 0, 0.3);
            z-index: 100;
        }

        .footer {
            background-color: white;
            padding: 20px 0;
            margin-top: 30px;
        }

        .chaoLianJie{
            text-underline: none !important;
        }
    </style>
</head>
<body>
<!-- 导航栏部分修改 -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
    <div class="container">
        <a class="navbar-brand" href="${pageContext.request.contextPath}/product/list">二手平台</a>
        <div class="d-flex flex-grow-1 mx-3">
            <div class="search-bar input-group">
                <input type="text" class="form-control" placeholder="搜索商品">
                <button class="btn" type="button">
                    <i class="bi bi-search"></i>
                </button>
            </div>
        </div>
        <ul class="navbar-nav">
            <c:choose>
                <c:when test="${not empty sessionScope.currentUser}">
                    <li class="nav-item">
                        <a class="nav-link" href="${pageContext.request.contextPath}/cart/view">
                            <i class="bi bi-cart"></i>
                        </a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
                           data-bs-toggle="dropdown" aria-expanded="false">
                                ${sessionScope.currentUser.username}
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                            <li><a class="dropdown-item" href="${pageContext.request.contextPath}/order/list">我的订单</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="${pageContext.request.contextPath}/user/logout">退出登录</a></li>
                        </ul>
                    </li>
                </c:when>
                <c:otherwise>
                    <li class="nav-item">
                        <a class="nav-link" href="${pageContext.request.contextPath}/user/login">登录</a>
                    </li>
                </c:otherwise>
            </c:choose>
        </ul>
    </div>
</nav>

<!-- 分类导航 -->
<div class="category-nav">
    <div class="container">
        <div class="category-item active">全部</div>
        <div class="category-item">手机</div>
        <div class="category-item">电脑</div>
        <div class="category-item">数码</div>
        <div class="category-item">家电</div>
        <div class="category-item">服装</div>
        <div class="category-item">图书</div>
        <div class="category-item">家具</div>
        <div class="category-item">运动</div>
        <div class="category-item">母婴</div>
        <div class="category-item">其他</div>
    </div>
</div>

<!-- 商品列表 -->
<div class="container mt-3">
    <div class="row">
        <c:forEach items="${products}" var="product" varStatus="status">
            <div class="col-6 col-md-4 col-lg-3 mb-3">
                <a href="/product/detail?id=${product.id}" class="text-decoration-none">
                    <div class="product-card">
                        <img src="${product.imagePath}" class="product-image w-100" alt="${product.name}">
                        <div class="p-2">
                            <div class="product-price">¥${product.price}</div>
                            <div class="product-title mt-1">${product.name}</div>
                            <div class="product-meta mt-2">
                                <span>${product.category}</span>
                                <span class="float-end">${product.createdTime}</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </c:forEach>
    </div>

    <!-- 分页 -->
    <nav class="mt-4">
        <ul class="pagination justify-content-center">
            <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1">上一页</a>
            </li>
            <li class="page-item active"><a class="page-link" href="#">1</a></li>
            <li class="page-item">
                <a class="page-link" href="#">下一页</a>
            </li>
        </ul>
    </nav>
</div>

<!-- 发布按钮 -->
<a href="/product/post" class="btn btn-post">
    <i class="bi bi-plus-lg"></i>
</a>

<!-- 页脚 -->
<footer class="footer">
    <div class="container text-center">
        <div class="mb-2">
            <a href="${pageContext.request.contextPath}/help_center.jsp" class="text-secondary mx-2 chaoLianJie">帮助中心</a>
            <a href="${pageContext.request.contextPath}/xieyi.jsp" class="text-secondary mx-2 chaoLianJie">用户协议</a>
            <a href="${pageContext.request.contextPath}/yinSizhengCe.jsp" class="text-secondary mx-2 chaoLianJie">隐私政策</a>
            <a href="${pageContext.request.contextPath}/about.jsp" class="text-secondary mx-2 chaoLianJie">关于我们</a>
        </div>
        <div class="text-secondary">© 2025 二手交易平台 版权所有</div>
    </div>
</footer>

<script src="${pageContext.request.contextPath}/resources/js/popper.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js"></script>
</body>
</html>